<template>
    <div class="list-wrapper">
        <Block>
            <DataGrid :auto-load="autoLoad" row-key="id" ref="tableRef">
                <template #toolbar-operation>
                    <el-button type="primary" @click="onNewItem">新建</el-button>
                </template>
                <el-table-column label="模型名称">
                    <template #default="{ row }">
                        <el-button link type="primary" @click="onPreview(row)">
                            {{ row.displayName }}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="pageCode" label="标识符" />
                <el-table-column prop="description" label="描述" />
                <el-table-column label="操作" width="165" fixed="right">
                    <template #default="{ row }">
                        <el-button link type="primary" @click="onDesign(row)"> 设计 </el-button>
                        <el-button link type="primary" @click="onEditItem(row)"> 修改 </el-button>
                        <el-button link type="danger" @click="onDeleteItem(row)"> 删除 </el-button>
                    </template>
                </el-table-column>
            </DataGrid>
        </Block>
    </div>
</template>
<script setup lang="ts">
import { viewService } from '@great/services';
import { showPopupBox } from '@great/utils';
import { Block, DataGrid, type DataGridInstance } from '@great/components';
import FormModal from '@/pages/model/page/components/FormModal.vue';
import { router } from '@/router';

const tableRef = useTemplateRef<DataGridInstance>('tableRef');
const autoLoad = reactive({
    onLoad: async (current, size) => {
        const res = await viewService.getList({
            current,
            size
        });
        return { data: res.data.records, total: res.data.total };
    }
});

function onNewItem() {
    showPopupBox(FormModal, {
        callback: () => tableRef.value?.refresh()
    });
}
function onDeleteItem(row: any) {
    ElMessageBox.confirm(`是否确认删除页面 ${row?.displayName} ？`, '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
    })
        .then(async () => {
            await viewService.del(row.id);
            ElNotification({
                title: '删除成功！',
                type: 'success'
            });
            tableRef.value?.refresh();
        })
        .catch(() => {});
}
function onEditItem(row: any) {
    showPopupBox(FormModal, {
        detail: row,
        callback: () => tableRef.value?.refresh()
    });
}
function onDesign(row: any) {
    window.open(`/model/page/detail/${row.pageCode}`, '_blank');
}
function onPreview(row: any) {
    router.push({
        name: 'custom-page',
        params: {
            code: row?.pageCode
        }
    });
}
</script>
<style scoped lang="scss">
.list-wrapper {
    .query-from-box {
        display: flex;
        align-items: center;
        .el-form {
            display: flex;
            .el-form-item {
                margin-bottom: 0;
                width: 192px;
            }
            .el-form-item + .el-form-item {
                margin-left: 10px;
            }
        }
    }
    :deep(.data-grid) {
        .table-item-status {
            display: flex;
            align-items: center;
            &::before {
                content: '';
                width: 6px;
                height: 6px;
                display: inline-block;
                border-radius: 50%;
                margin-right: 5px;
            }
        }
        .table-item-status[status='未激活'] {
            &::before {
                background-color: #909399;
            }
        }
        .table-item-status[status='激活'] {
            &::before {
                background-color: #67c23a;
            }
        }
    }
}
</style>
